<script setup>
import { ref, onMounted, reactive } from 'vue';
import { useRouter } from 'vue-router'
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
import wlsCollect from "@/components/common/wls-collect.vue";
import wlsLarge from '@/components/common/wls-large.vue'
import { InvalidPhotos, delStarsImage, StarsImage, delImgBatch } from '@/utils/api.js'
const router = useRouter();
let areaId = '';
let mobile = '';
let userName = '';
let pageNum = 1;
let sta = '';
const setofid = ref([]);
const coll = ref(null);
const list = ref([]);
const date = ref('');
const totalElements = ref(0);
const currentPage = ref(1);
const input = ref('');
const iswl = ref(false);
const wlm = ref([]);
const handleSizeChange = (val) => {
    pageNum = val;
    getInvalidPhotos();
};

const scl = () => {
    pageNum = 1;
    currentPage.value = 1;
    getInvalidPhotos();
}

const delid = () => {
    ElMessageBox.confirm(
        '确定要永久删除该文件?继续？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            let params = {
                "userName": userName,
                iamgeIdList: setofid.value
            }
            delImgBatch(params).then(res => {
                if (res.code == '200') {
                    ElMessage({
                        type: 'success',
                        message: '删除完成',
                    })
                    getInvalidPhotos()
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}

const ischoice = (id) => {
    if (setofid.value.indexOf(id) == -1) {
        setofid.value.push(id)
        return false
    }
    if (setofid.value.indexOf(id) != -1) {
        setofid.value.splice(setofid.value.indexOf(id), 1)
        return false
    }
}

const checkAllId = () => {
    list.value.forEach(e => {
        setofid.value.push(e.id)
    })
}
const callOffId = () => {
    setofid.value = []
}

const getInvalidPhotos = async () => {
    let params = '?areaId=' + areaId + '&mobile=' + mobile + '&date=' + formatProcessingTime(date.value) + '&pageNum=' + pageNum + '&pageSize=18';
    let res = await InvalidPhotos(params)
    if (res.code == '200') {
        list.value = res.data.content;
        totalElements.value = res.data.totalElements;
    }
}

const formatProcessingTime = (data) => {
    if (data != null && data != '') {
        let datetime = new Date(data);
        let year = datetime.getFullYear();
        let month = datetime.getMonth() + 1;
        let date = datetime.getDate();

        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (date >= 0 && date <= 9) {
            date = "0" + date;
        }

        return year + "-" + month + "-" + date;
    } else {
        return ""
    }
}


const collcr = (data) => {
    sta = data.id;
    if (data.starsStatus == 0) {
        coll.value.open()
    } else {
        let str = '是否取消收藏该文件. 继续?'
        ElMessageBox.confirm(
            str,
            '提示',
            {
                confirmButtonText: '是',
                cancelButtonText: '否',
                type: 'warning',
            }
        )
            .then(() => {
                let params = '?id=' + data.id + '&areaId=' + areaId + '&mobile=' + mobile;
                delStarsImage(params).then(res => {
                    if (res.code == '200') {
                        ElMessage({
                            type: 'success',
                            message: '取消收藏成功'
                        })
                        getInvalidPhotos();
                    }
                })
            })
            .catch(() => {

            })
    }

}

const iscollect = (data) => {
    let params = {
        "folderId": data,
        "imageId": sta
    }
    StarsImage(params).then(res => {
        if (res.code == '200') {
            getInvalidPhotos();
            coll.value.close()
        }
    })
}

const openLarge = (data) => {
    wlm.value = data;
    iswl.value = true;
};

const goaut = (data) => {
    let name = '疑似空照片';
    let hisa = {
        pageNum: pageNum,
        currentPage: currentPage.value,
        date: formatProcessingTime(date.value),
    }
    window.sessionStorage.setItem('hisa', JSON.stringify(hisa));
    router.push({ path: '/empty/wlsauthenticate', query: { name: name, id: data.id, empt: 'good' } });
}

onMounted(() => {
    areaId = window.sessionStorage.getItem('areaId');
    mobile = window.sessionStorage.getItem('mobile');
    userName = window.sessionStorage.getItem('zhName');
    setTimeout(function () {
        if (window.sessionStorage.getItem('hisa') != null) {
            let data = JSON.parse(window.sessionStorage.getItem('hisa'));
            date.value = data.date == '' ? '' : new Date(data.date);
            pageNum = data.pageNum;
            currentPage.value = data.currentPage;
            getInvalidPhotos();
            window.sessionStorage.removeItem('hisa')
        } else {
            getInvalidPhotos();
        }
    }, 500)

})
</script>
<template>
    <div class="wls-aut">
        <div class="wls-aut-title">
            <div style="font-weight: 700;"><span>疑似空照片</span></div>
        </div>
        <div class="wls-aut-container">
            <div class="bcb">
                <el-row :gutter="20" justify="space-between">
                    <el-col :span="6">
                        <el-date-picker size="large" @change="scl()" style="width: 100%;" v-model="date" clearable
                            type="date" placeholder="选择日期" />
                    </el-col>
                    <el-col :span="12" style="text-align: right;">
                        <el-button type="primary" @click.stop="checkAllId()">全选（当前页）</el-button>
                        <el-button @click.stop="callOffId()">取消全选</el-button>
                        <el-button type="danger" @click.stop="delid()">删除(当前页选择)</el-button>
                    </el-col>
                </el-row>

                <ul class="wls-empty">
                    <li class="bcb" v-for="(i, index) in list">
                        <div class="wls-empty-img">
                            <div class="wls-empty-img-c" style="left: 0.08rem;">
                                <input type="checkbox" @change="ischoice(i.id)" :checked="setofid.indexOf(i.id) != -1">
                            </div>
                            <div class="wls-empty-img-c wls-empty-img-collect" @click.stop="collcr(i)"
                                style="right: 0.08rem;">
                                <i class="icon iconfont icon-shoucang"
                                    :style="i.starsStatus == 0 ? '' : 'color:#FCD60F'"></i>
                            </div>
                            <video v-if="$wlsf.filiv(i.url) == 4" :src="i.url" controls alt=""></video>
                            <img @click.stop="openLarge([i.url])" v-else :src="i.url" alt="">
                        </div>
                        <div style="height: 0.5rem;display: flex;align-items: center;justify-content: center;"
                            @click.stop="goaut(i)">
                            <span style="color: var(--wls-color);cursor: pointer;">前往鉴定</span>
                        </div>
                    </li>
                </ul>
                <el-pagination v-model:current-page="currentPage" :page-size="18" :small="true" :disabled="false" background
                    layout="total, prev, pager, next, jumper" :total="totalElements" @current-change="handleSizeChange" />
            </div>
        </div>
        <wls-large :msg="wlm" v-if="iswl" @closeLarge="iswl = false" />
        <wls-collect ref="coll" @submitfl="iscollect"></wls-collect>
    </div>
</template>
<style scoped>
.wls-empty {
    width: 100%;
    padding: 3px;
    overflow: hidden;
}

.wls-empty>li {
    width: calc((100% - 0.8rem) / 6);
    height: 2.2rem;
    float: left;
    margin: 0.16rem 0.16rem 0 0;
}

.wls-empty>li:nth-child(6n) {
    margin-right: 0;
}

.wls-empty-img {
    width: 100%;
    height: 1.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    position: relative;
}

.wls-empty-img img {
    width: 100%;
    height: 100%;
}

.wls-empty-img video {
    max-width: 100%;
    max-height: 100%;
}

.wls-empty-img-c {
    color: #fff;
    position: absolute;
    top: 0.08rem;
    z-index: 9;
}

.wls-empty-img-c input {
    display: inline-block;
    width: .2rem;
    height: 0.2rem;
}

.wls-empty-img-collect {
    width: 0.4rem;
    height: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, .5);
    cursor: pointer;
}

.wls-collect-list {
    /* width: 2rem; */
    padding: 0 .16rem;
    border-radius: 4px;
    background-color: #fff;
    position: absolute;
    top: 0.5rem;
    left: 0;
    z-index: 3;
    overflow: hidden;
}
</style>